<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>简单滑块验证</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #006b9d
        }

        /*  背景  */
        #box {
            width: 508px;
            height: 523px;
            background: url(images/bg.png);
            margin: 50px auto;
            position: relative;
        }

        /*  拼图  */
        #drag {
            width: 171px;
            height: 140px;
            background: url(images/drag.png);
            position: absolute;
            top: 185px;
            left: 0;
            display: none
                /* 不触发点击事件时不显示 */
        }

        /*  小圆点  */
        #dot {
            width: 29px;
            height: 29px;
            background: url(images/dot.png);
            position: absolute;
            top: 460px;
            left: 70px;
        }

        /*  验证成功提示文本  */
        #text {
            display: none;
            color: #fff;
            font-size: 32px;
            background: #C33;
            padding: 10px;
            position: absolute;
            right: 185px;
            top: 200px;
        }
    </style>
</head>

<body>
    <div id="box"> <!-- 背景图 -->
        <div id="drag"></div> <!-- 拼图 -->
        <div id="dot"></div> <!-- 小圆点滑块 -->
        <p id="text">验证成功!</p> <!-- 提示文本 -->
    </div>
</body>

</html>
<script>
    // 获取元素
    var drag = document.querySelector('#drag')
    var dot = document.querySelector('#dot')
    var text = document.querySelector('#text')
    var dotStart = dot.offsetLeft // 获取小圆点的起始的X坐标
    var dragStart = drag.offsetLeft // 获取拼图的起始的X坐标

    dot.onmousedown = function (e) { // 滑块按下鼠标左键时，开始执行代码
        var e = e || window.event
        drag.style.display = 'block' // 使拼图显示出来
        var startX = e.clientX // 获取按下鼠标时 小圆点在游览器的x坐标
        // console.log(startX)
        var dotLeft = dot.offsetLeft // 获取按下小圆点时的x坐标
        // console.log(dotLeft);
        
        document.onmousemove = function (e) { // 小圆点和拼图跟随鼠标移动
            var e = e || window.event
            var move = e.clientX - startX  // 当前滑动过的小圆点x坐标 - 小圆点开始坐标 就是小圆点移动的距离
            // console.log(move)
            var to = dotLeft + move // 小圆点最后应该到达的坐标
            // console.log(to)
            var max = 350 // 能拖动的最大范围 蓝线的长度
            // 判断移动坐标值是否超过了滑块可移动区域，超过则停止
            if (to > max + dotStart) { // 向右
                to = max + dotStart
            } else if (to < dotStart) { // 向左
                to = dotStart
            }
            dot.style.left = to + 'px' // 刷新滑块的x坐标位置
            drag.style.left = (dragStart + to - dotStart) + 'px ' //根据滑块的位移，刷新拼图的x坐标位置
        }
        document.onmouseup = function () { 
            this.onmousemove = null  // 当鼠标松开左键，则停止跟随移动
            var buffer = 7  // 设置缓冲值的目的是让拼图移动到正确坐标值没那么难
            var final = 158  // 设置拼图的正确坐标 这个位置在图片中是固定的
            // console.log(drag.offsetLeft - final)
            // 计算拼图此时坐标和正确坐标的差值的绝对值，判断差值是否小于缓冲值，小于则验证成功，大于则验证失败
            if (Math.abs(drag.offsetLeft - final) < buffer) {
                text.style.display = 'block' // 显示验证成功
            } else {
                text.style.display = 'none' // 不显示
            }
        }
    }
</script>